<template>
  <div
    class="nav_box_content"
    :style="{ transform: 'translateX(' + (isOpen ? 0 : '100') + 'px)' }"
  >
    <img
      src="~/assets/images/close.png"
      class="nav_box_close"
      @click="close"
      alt=""
    />
    <div class="nav_box_list">
      <div class="nav_box_num" @click="direct('home')">
        <nuxt-link to="/">
          <span><img src="~/assets/images/home.jpg" />首页</span>
        </nuxt-link>
      </div>
      <div class="nav_box_num" @click="direct('recommand')">
        <span><img src="~/assets/images/menu-icons/intro.png" /> 推荐视频</span>
      </div>
      <div class="nav_box_num" data-src="coming" @click="direct('new')">
        <span><img src="~/assets/images/menu-icons/coming.png" />最新视频</span>
      </div>
      <!-- <div
        class="nav_box_num"
        data-src="topic"
        :latag="$latag('banner_anchor_topic_3')"
        v-if="$route.path != '/topic/'"
        @click="direct('topic')"
      >
        <span><img src="~/assets/images/menu-icons/topic.png" /> 精彩专题</span>
      </div> -->
      <div class="nav_box_num" data-src="review" @click="direct('review')">
        <span><img src="~/assets/images/nav.png" /> 全部视频</span>
      </div>

      <div class="nav_box_num" data-src="review" @click="direct('news')">
        <span><img src="~/assets/images/review.png" />热门资讯</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    close() {
      this.isOpen = false;
      this.$emit("close");
    },
    open() {
      this.isOpen = true;
    },
    direct(link) {
      this.close();
      // setTimeout(function() {
      //   location.hash = "#" + link;
      // }, 100);
      document.querySelector("#" + link).scrollIntoView();
    }
  }
};
</script>

<style lang="scss" scoped>
.nav_box_content {
  width: 60%;
  font-size: 0.45rem;
  background-color: #fff;
  height: 100%;
  display: inline-block;
  position: relative;
  padding: 0 0.4rem;
  transform: translateX(100%);
  transition: all 0.7s ease;
  &.show {
    transform: translateX(0px);
  }
  .nav_box_close {
    width: 0.4rem;
    margin-top: 0.4rem;
  }

  .nav_box_list {
    .nav_box_num {
      text-align: left;
      border-bottom: 1px rgba(0, 0, 0, 0.1) dashed;
      height: 1.3rem;
      line-height: 1.3rem;
      cursor: pointer;

      span {
        vertical-align: middle;
        padding-left: 0.15rem;
        color: #000;
        img {
          width: 0.38rem;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
